<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<table>
	<tr>
		<td valign="top">
			<table width="170px">
				<!--S-条件查找-->
				<tr>
					<td bgcolor="#CCCCCC">
						<a href="javascript:showView('search')">条件查找</a>
					</td>
				</tr>
				<tr>
					<td>
						<div id="searchLayer" style="display: none;">
							<table width="160px">
								<tr>
									<td align="right">
										用户名:
									</td>
									<td>
										<input type="text" style="width: 90px;" />
									</td>
								</tr>
								<tr>
									<td align="right">
										真实姓名:
									</td>
									<td>
										<input type="text" style="width: 90px;" />
									</td>
								</tr>
								<tr>
									<td align="right">
										角色:
									</td>
									<td>
										<select style="width: 90px;">
											<option>
												全部
											</option>
											<option>
												student
											</option>
											<option>
												teacher
											</option>
											<option>
												stat
											</option>
											<option>
												admin
											</option>
										</select>
									</td>
								</tr>
								<tr id="teamSelector">
									<td align="right">
										班级:
									</td>
									<td>
										<select multiple="multiple" style="width: 90px;">
											<option>
												全部
											</option>
											<option>
												st15
											</option>
											<option>
												st16
											</option>
											<option>
												st19
											</option>
											<option>
												st22
											</option>
											<option>
												st26
											</option>
										</select>
									</td>
								</tr>
								<tr>
									<td align="right" colspan="2">
										<input type="button" value="重置" />
										&nbsp;
										<input type="button" value="查找"
											onclick="javascript:showResult()" />
									</td>
								</tr>
							</table>
						</div>
					</td>
				</tr>
				<!--E-条件查找-->
				<!--S-修改-->
				<tr>
					<td bgcolor="#CCCCCC">
						<a href="javascript:showView('modify')">修改信息</a>
					</td>
				</tr>
				<tr>
					<td>
						<div id="modifyLayer" style="display: none;">
							<table width="160px">
								<tr>
									<td align="right">
										用户名:
									</td>
									<td>
										st17renzhongyuan
									</td>
								</tr>
								<tr>
									<td align="right">
										密码:
									</td>
									<td>
										<input type="password" style="width: 90px;" />
									</td>
								</tr>
								<tr>
									<td align="right">
										确认密码:
									</td>
									<td>
										<input type="password" style="width: 90px;" />
									</td>
								</tr>
								<tr>
									<td align="right">
										真实姓名:
									</td>
									<td>
										<input type="text" style="width: 90px;" />
									</td>
								</tr>
								<tr>
									<td align="right">
										角色:
									</td>
									<td>
										<select style="width: 90px;">
											<option>
												student
											</option>
											<option>
												teacher
											</option>
											<option>
												stat
											</option>
											<option>
												admin
											</option>
										</select>
									</td>
								</tr>
								<tr id="teamSelector">
									<td align="right">
										班级:
									</td>
									<td>
										<select style="width: 90px;">
											<option>
												st15
											</option>
											<option>
												st16
											</option>
											<option>
												st19
											</option>
											<option>
												st22
											</option>
											<option>
												st26
											</option>
										</select>
									</td>
								</tr>
								<tr>
									<td>
										&nbsp;
									</td>
									<td align="right">
										<input type="button" value="保存" />
										&nbsp;
										<input type="button" value="取消" />
									</td>
								</tr>
							</table>
						</div>
					</td>
				</tr>
				<!--E-修改-->
				<!--S-添加-->
				<tr>
					<td bgcolor="#CCCCCC">
						<a href="javascript:showView('addView')">创建用户</a>
					</td>
				</tr>
				<tr>
					<td>
						<div id="addViewLayer" style="display: none;">
							<table width="160px">
								<tr>
									<td align="right">
										用户名:
									</td>
									<td>
										<input type="text" style="width: 90px;" />
									</td>
								</tr>
								<tr>
									<td align="right">
										密码:
									</td>
									<td>
										<input type="password" style="width: 90px;" />
									</td>
								</tr>
								<tr>
									<td align="right">
										确认密码:
									</td>
									<td>
										<input type="password" style="width: 90px;" />
									</td>
								</tr>
								<tr>
									<td align="right">
										真实姓名:
									</td>
									<td>
										<input type="text" style="width: 90px;" />
									</td>
								</tr>
								<tr>
									<td align="right">
										角色:
									</td>
									<td>
										<select style="width: 90px;">
											<option>
												student
											</option>
											<option>
												teacher
											</option>
											<option>
												stat
											</option>
											<option>
												admin
											</option>
										</select>
									</td>
								</tr>
								<tr>
									<td align="right">
										班级:
									</td>
									<td>
										<select style="width: 90px;">
											<option>
												st15
											</option>
											<option>
												st16
											</option>
											<option>
												st19
											</option>
											<option>
												st22
											</option>
											<option>
												st26
											</option>
										</select>
									</td>
								</tr>
								<tr>
									<td>
										<a href="javascript:showAddBatch()">批量创建</a>
									</td>
									<td align="right">
										<input type="button" value="提交" />
										&nbsp;
										<input type="button" value="重置" />
									</td>
								</tr>
							</table>
						</div>
					</td>
				</tr>
				<!--E-添加-->
				<!--S-说明-->
				<tr>
					<td bgcolor="#CCCCCC" colspan="2">
						说明
					</td>
				</tr>
				<tr>
					<td colspan="2">
						- "选择班级"在角色为student时
						<br>
						才会显示。
						<br>
					</td>
				</tr>
				<!--E-说明-->
			</table>
		</td>
		<td valign="top">
			<!--S-批量创建-->
			<div id="addBatchView" style="display: none;">
				<table width="600px">
					<tr>
						<td bgcolor="#CCCCCC" colspan="2">
							<b>批量创建用户</b>
						</td>
					</tr>
					<tr>
						<td bgcolor="#CCCCCC" colspan="2">
							第一步:输入要生成的用户的姓名,以空格分隔,如下所示
						</td>
					</tr>
					<tr>
						<td align="right">
							真实姓名:
						</td>
						<td>
							<textarea cols="60" rows="5">万炳新 任重远 修伟佳 李威 刘建廷 李志刚 胡泽栋 刘青 冯一庭</textarea>
						</td>
					</tr>
					<tr>
						<td bgcolor="#CCCCCC" colspan="2">
							第二步:选择要生成的角色
						</td>
					</tr>
					<tr>
						<td align="right">
							角色:
						</td>
						<td>
							<select style="width: 90px;">
								<option>
									student
								</option>
								<option>
									teacher
								</option>
								<option>
									stat
								</option>
								<option>
									admin
								</option>
							</select>
							&nbsp;
							<a href="#">新建角色</a>
						</td>
					</tr>
					<tr>
						<td align="right">
							班级:
						</td>
						<td>
							<select style="width: 90px;">
								<option>
									st17
								</option>
								<option>
									st18
								</option>
								<option>
									st19
								</option>
								<option>
									st20
								</option>
							</select>
							&nbsp;
							<a href="#">新建班级</a>
						</td>
					</tr>
					<tr>
						<td bgcolor="#CCCCCC" colspan="2">
							第三步:设置生成用户名的格式
						</td>
					</tr>
					<tr>
						<td align="right">
							占位符:
						</td>
						<td>
							{n} 表示姓名的拼音，如“学生”将转换为xuesheng
							<br>
							{ns} 表示姓名的首字母缩写，如“学生”将转换为xs
							<br>
							{c} 表示已选择的班级名
							<br>
							{i} 表示有重复的用户名时将转换为数字，从1开始递增，没有重复时忽略
							<br>
							{l} 表示有重复的用户名时将转换为字母，从a开始递增，没有重复时忽略
							<br>
						</td>
					</tr>
					<tr>
						<td align="right">
							格式字符串:
						</td>
						<td>
							<input type="text" value="{c}{n}{i}" />
							&nbsp;
							<input type="text" disabled="true" value="st17xuesheng1" />
							&nbsp;
							<a href="#">恢复默认</a>
						</td>
					</tr>
					<tr>
						<td colspan="2" bgcolor="#CCCCCC">
							第四步:设置密码格式
						</td>
					</tr>
					<tr>
						<td align="right">
							密码:
						</td>
						<td>
							<input type="radio" name="pass" />
							为每个用户设置相同的密码：
							<input type="text" value="123456" />
							<br>
							<input type="radio" name="pass" />
							密码与用户名相同
						</td>
					</tr>
					<tr>
						<td colspan="2" bgcolor="#CCCCCC">
							第五步:生成预览并提交
						</td>
					</tr>
					<tr>
						<td align="center" colspan="2">
							<a href="#">生成预览</a>&nbsp;
							<a href="#">提交</a>
						</td>
					</tr>
				</table>
			</div>
			<!--E-批量创建-->
			<!--S-查找结果-->
			<div id="resultView" style="display: none;">
				<table>
					<tr>
						<td bgcolor="#CCCCCC">
							用户信息
						</td>
					</tr>
					<tr>
						<td>
							<table width="600px">
								<tr>
									<td align="center">
										选择
									</td>
									<td align="center">
										ID
									</td>
									<td align="center">
										用户名
									</td>
									<td align="center">
										真实姓名
									</td>
									<td align="center">
										班级
									</td>
									<td align="center">
										角色
									</td>
									<td align="center">
										创建时间
									</td>
									<td align="center">
										创建人
									</td>
								</tr>
								<tr>
									<td align="center">
										<input type="checkbox" disabled="true" />
									</td>
									<td align="center">
										0
									</td>
									<td align="center">
										admin
									</td>
									<td align="center">
										admin
									</td>
									<td align="center">
										-
									</td>
									<td align="center">
										admin
									</td>
									<td align="center">
										2009-10-1
									</td>
									<td align="center">
										admin
									</td>
								</tr>
								<tr>
									<td align="center">
										<input type="checkbox" />
									</td>
									<td align="center">
										1
									</td>
									<td align="center">
										boss
									</td>
									<td align="center">
										boss
									</td>
									<td align="center">
										-
									</td>
									<td align="center">
										admin
									</td>
									<td align="center">
										2009-10-1
									</td>
									<td align="center">
										admin
									</td>
								</tr>
								<tr>
									<td align="center">
										<input type="checkbox" />
									</td>
									<td align="center">
										2
									</td>
									<td align="center">
										jianxu
									</td>
									<td align="center">
										王建旭
									</td>
									<td align="center">
										-
									</td>
									<td align="center">
										teacher
									</td>
									<td align="center">
										2009-10-1
									</td>
									<td align="center">
										admin
									</td>
								</tr>
								<tr>
									<td align="center">
										<input type="checkbox" />
									</td>
									<td align="center">
										3
									</td>
									<td align="center">
										dinghe
									</td>
									<td align="center">
										丁贺
									</td>
									<td align="center">
										-
									</td>
									<td align="center">
										stat
									</td>
									<td align="center">
										2009-10-1
									</td>
									<td align="center">
										admin
									</td>
								</tr>
								<tr>
									<td align="center">
										<input type="checkbox" />
									</td>
									<td align="center">
										4
									</td>
									<td align="center">
										teacher
									</td>
									<td align="center">
										教师公用
									</td>
									<td align="center">
										-
									</td>
									<td align="center">
										teacher
									</td>
									<td align="center">
										2009-10-1
									</td>
									<td align="center">
										admin
									</td>
								</tr>
								<tr>
									<td align="center">
										<input type="checkbox" />
									</td>
									<td align="center">
										5
									</td>
									<td align="center">
										st17renzhongyuan
									</td>
									<td align="center">
										任重远
									</td>
									<td align="center">
										st17
									</td>
									<td align="center">
										student
									</td>
									<td align="center">
										2009-10-1
									</td>
									<td align="center">
										teacher
									</td>
								</tr>
								<tr>
									<td align="center">
										<input type="checkbox" />
									</td>
									<td align="center">
										6
									</td>
									<td align="center">
										st17songjiawen
									</td>
									<td align="center">
										宋家文
									</td>
									<td align="center">
										st17
									</td>
									<td align="center">
										student
									</td>
									<td align="center">
										2009-10-1
									</td>
									<td align="center">
										teacher
									</td>
								</tr>
								<tr>
									<td align="center">
										<input type="checkbox" />
									</td>
									<td align="center">
										7
									</td>
									<td align="center">
										st17luocheng
									</td>
									<td align="center">
										罗成
									</td>
									<td align="center">
										st17
									</td>
									<td align="center">
										student
									</td>
									<td align="center">
										2009-10-1
									</td>
									<td align="center">
										teacher
									</td>
								</tr>
								<tr>
									<td align="center">
										<input type="checkbox" />
									</td>
									<td align="center">
										8
									</td>
									<td align="center">
										st20liying
									</td>
									<td align="center">
										李影
									</td>
									<td align="center">
										st20
									</td>
									<td align="center">
										student
									</td>
									<td align="center">
										2009-10-1
									</td>
									<td align="center">
										teacher
									</td>
								</tr>
								<tr>
									<td align="center">
										<input type="checkbox" />
									</td>
									<td align="center">
										9
									</td>
									<td align="center">
										st20zhukaiyi
									</td>
									<td align="center">
										朱凯怡
									</td>
									<td align="center">
										st20
									</td>
									<td align="center">
										student
									</td>
									<td align="center">
										2009-10-1
									</td>
									<td align="center">
										teacher
									</td>
								</tr>
								<tr>
									<td align="center">
										<input type="checkbox" />
									</td>
									<td align="center">
										10
									</td>
									<td align="center">
										st20zhaodashuai
									</td>
									<td align="center">
										赵大帅
									</td>
									<td align="center">
										st20
									</td>
									<td align="center">
										student
									</td>
									<td align="center">
										2009-10-1
									</td>
									<td align="center">
										teacher
									</td>
								</tr>
								<tr>
									<td align="center">
										<input type="checkbox" />
									</td>
									<td align="center">
										11
									</td>
									<td align="center">
										st20wangjuncai
									</td>
									<td align="center">
										王君彩
									</td>
									<td align="center">
										st20
									</td>
									<td align="center">
										student
									</td>
									<td align="center">
										2009-10-1
									</td>
									<td align="center">
										teacher
									</td>
								</tr>
							</table>
						</td>
					</tr>
					<tr>
						<td bgcolor="#CCCCCC">
							12条记录，共1页
						</td>
					</tr>
					<tr>
						<td align="center">
							<a href="#">全选</a>&nbsp;|&nbsp;
							<a href="#">全不选</a>&nbsp;|&nbsp;
							<a href="#">反选</a>&nbsp;|&nbsp;
							<a href="#">删除选中</a>&nbsp;|&nbsp;
							<a href="#">删除全部</a>&nbsp;|&nbsp;
							<a href="#" disabled="true">首页</a>&nbsp;|&nbsp;
							<a href="#" disabled="true">上一页</a>&nbsp;|&nbsp;
							<a href="#" disabled="true">下一页</a>&nbsp;|&nbsp;
							<a href="#" disabled="true">尾页</a>&nbsp;|&nbsp;
							<select>
								<option>
									10
								</option>
								<option>
									20
								</option>
								<option>
									30
								</option>
								<option>
									50
								</option>
							</select>
							条/页
						</td>
					</tr>
				</table>
			</div>
			<!--E-查找结果-->
		</td>
	</tr>
</table>
<script language="javascript">
	function showView(name){
	    if (document.getElementById(name + "Layer").style.display == "none") {
	        $("#" + name + "Layer").slideDown("normal");
	    }
	    else {
	        $("#" + name + "Layer").slideUp("normal");
	    }
	}
	
	function showResult(){
	    if (document.getElementById("resultView").style.display == "none") {
	        $("#addBatchView").hide();
	        $("#resultView").slideDown("normal");
	    }
	}
	
	function showAddBatch(){
	    if (document.getElementById("addBatchView").style.display == "none") {
	        $("#resultView").hide();
	        $("#addBatchView").slideDown("normal");
	    }
	}
</script>